<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复刻北京美团网-北京美食_酒店_旅游_团购_电影_吃喝玩乐</title>
    <meta name="description" content="北京美团网精选北京美食餐厅,酒店预订,电影票,旅游景点,外卖订餐,北京团购信息,您可查询商家评价店铺信息。北京生活,下载美团官方APP ,吃喝玩乐1折起。">
    <meta name="keywords" content="北京美食,北京酒店,北京团购">
    <!-- title前面的小图标 -->
    <link rel="icon" type="image/icon" href="favicon.ico">
    <!-- 基础样式 -->
    <link rel="stylesheet" type="text/css" href="./css/base.css">
    <!-- 头部公共文件样式 -->
    <link rel="stylesheet" type="text/css" href="./css/com_header.css">
    <!-- 详情页文件样式 -->
    <link rel="stylesheet" href="./css/details.css">
    <!-- 详情页js文件 -->
    <script src="./js/details.js"></script>
</head>

<body>
    <!-- 头部导航条 -->
    <div class="nav">
        <div class="nav-center">
            <!-- 导航条左侧 位置登录注册 -->
            <div class="nav-center-left">
                <!-- 字体图标类名的使用 -->
                <span class="icon-location"></span>
                <a href="#">切换城市</a>
                <a href="./login.html">立即登录</a>
                <a href="./register.html">注册</a>
            </div>
            <!-- 导航条右侧 我的美团 手机APP 商家中心 美团规则 网站导航 -->
            <div class="nav-center-right">
                <ul id="dropdown">
                    <li>
                        <a href="">我的美团</a>
                        <dl class="displaynone">
                            <dd><a href="">我的订单</a></dd>
                            <dd><a href="">我的收藏</a></dd>
                            <dd><a href="">抵用券</a></dd>
                            <dd><a href="">账户设置</a></dd>
                        </dl>
                    </li>
                    <li>
                        <a href="">手机APP</a>
                        <dl></dl>
                    </li>
                    <li>
                        <a href="">商家中心</a>
                        <dl class="displaynone">
                            <dd>
                                <a href="#">美团餐饮商户中心</a>
                            </dd>
                            <dd>
                                <a href="#">登录商家中心</a>
                            </dd>
                            <dd>
                                <a href="#">美团智能收银</a>
                            </dd>
                            <dd>
                                <a href="#">我想合作</a>
                            </dd>
                            <dd>
                                <a href="#">手机免费开店</a>
                            </dd>
                            <dd>
                                <a href="#">到店综合业务招募</a>
                            </dd>
                            <dd>
                                <a href="#">餐饮合作社招募</a>
                            </dd>
                            <dd>
                                <a href="#">商家申请开票</a>
                            </dd>
                            <dd>
                                <a href="#">免费合作美团排队</a>
                            </dd>
                        </dl>
                    </li>
                    <li>
                        <a href="">美团规则</a>
                        <dl class="displaynone">
                            <dd>
                                <a href="#">规则中心</a>
                            </dd>
                            <dd>
                                <a href="#">规则目录</a>
                            </dd>
                            <dd>
                                <a href="#">规则评议院</a>
                            </dd>
                        </dl>
                    </li>
                    <li>
                        <a href="">网站导航</a>
                        <dl class="displaynone">
                            <dd>
                                <div>
                                    酒店旅游
                                </div>
                                <span>国际机票</span>
                                <span>火车票</span>
                                <span>民宿</span>
                                <span>经济型酒店</span>
                                <span>主题酒店</span>
                                <span>商务酒店</span>
                                <span>公寓</span>
                                <span>豪华酒店</span>
                                <span>客栈</span>
                                <span>青年旅社</span>
                                <span>度假酒店</span>
                                <span>别墅</span>
                                <span>农家院</span>
                            </dd>
                            <dd>
                                <div>
                                    吃美食
                                </div>
                                <span>烤鱼</span>
                                <span>特色小吃</span>
                                <span>烧烤</span>
                                <span>自助餐</span>
                                <span>火锅</span>
                                <span>代金券</span>
                            </dd>
                            <dd>
                                <div>
                                    看电影
                                </div>
                                <span>热映电影</span>
                                <span>热门影院</span>
                                <span>热映电影口碑</span>
                                <span>最受期待电影</span>
                                <span>国内票房榜</span>
                                <span>北美票房榜</span>
                                <span>电影排行榜</span>
                            </dd>
                            <dd>
                                <div>
                                    手机应用
                                </div>
                                <span>
                                    <img src="./images/meituan.png" alt="美团"/>
                                </span>
                                <span>
                                    <img src="./images/waimai.png" alt="美团"/>
                                </span>
                                <span>
                                    <img src="./images/162c3308d9622f6d9cfaa49e60be4dca8573.png" alt="美团"/>
                                </span>
                                <span>
                                    <img src="./images/dianping.png" alt="美团"/>
                                </span>
                                <span>
                                    <img src="./images/maoyan.png" alt="美团"/>
                                </span>
                            </dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 放大镜案例 -->
    <div class="banner">
        <div class="banner-center">
            <!-- 商品盒子 -->
            <div class="box" id="enalrge">
                <div class="show">
                    <img src="./images/medium.jpeg" alt="applepencli">
                    <!-- 遮罩层 -->
                    <div class="mask"></div>
                </div>
                <div class="list">
                    <p>
                        <img src="./images/small.jpeg" alt="">
                    </p>
                </div>
                <!-- 放大镜盒子 -->
                <div class="enlarge"></div>
            </div>
        </div>
    </div>
    <!-- 放大镜的js -->
    <script>
        const e = new Enlarge('#enalrge')
        console.log(e)
    </script>
</body>
</html>